<template>
	<view class="assetsManagementDetail">
		<!-- 收支统计 -->
		<view class="income-and-expenditure-statistics">
			<view class="header">
				<uni-icons type="wallet-filled" size="20"></uni-icons>
				<text class="text">{{accountName}} </text>
				<text class="text" v-show="bankName">|</text>
				<text class="text">{{bankName}} </text>
			</view>

			<view class="eye">
				<text></text>
				<uni-icons :type="eyeType" size="30" color="#fff" @click="eyeChange"></uni-icons>
			</view>
			<view>账户余额（元）</view>
			<view class="income-and-expenditure-statistics-all-out">{{eyeChangeValue(assetsBalance.balance)}}</view>
			<text> 支出 {{eyeChangeValue(assetsBalance.expense)}}&emsp;|&emsp;收入
				{{eyeChangeValue(assetsBalance.income)}}</text>
		</view>
		<view class="title-and-add">
			<text>账户明细</text>
			<picker class="picker" mode="date" fields="month" :value="monthDate" :start="startDate" :end="endDate"
				@change="bindMonthDateChange">
				<text>{{monthDate}}</text>
				<uni-icons type="down" size="15"></uni-icons>
			</picker>
		</view>

		<!-- 列表明细 -->
		<view v-for="i in detailList">
			<view class="list-item">
				<view class="list-item-content">
					<uni-icons :type="i.icon||'wallet'" size="35"></uni-icons>
					<view class="list-item-content-view">
						<view>{{i.type}}</view>
						<text>{{i.newDate}}</text>
					</view>
				</view>
				<view>
					<text :class=" moneyClass(i.money) ">{{ ( i.money.includes('-')? '':'+')+  eyeChangeValue(i.money)}}
					</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { assetsApi } from "@/apis/apis"
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { getDate } from '@/utils'
	const accountName = ref('')
	const bankName = ref('')
	const assetsId = ref('')
	onLoad((options : any) => {
		accountName.value = options.accountName
		assetsId.value = options.assetsId
		if (options.bankName) bankName.value = options.bankName

	})
	const detailList = ref([
		/* 
		 {
				"id": "1889261616156513615",
				"type": "清洁费",
				"money": "-500.00",
				"newDate": "2024-02-06 19:46:09",
				"categoryName": null,
				"remarks": null
			  },
		*/
	])


	// 查询资产明细
	const getDetail = async () => {
		const res : any = await assetsApi.queryPageSUsingGET({
			date: monthDate.value,
			assetsId: assetsId.value,
			deleted: 0
		})
		detailList.value = res.data.records
	}

	const assetsBalance = ref({
		"income": null,
		"balance": null,
		"expense": null

	})
	// 查询收入和支出
	const getAssets = async () => {
		const res : any = await assetsApi.querySUsingGET({
			assetsId: assetsId.value,
			date: monthDate.value,
		})
		assetsBalance.value = res.data
	}
	onShow(() => {
		getDetail()
		getAssets()

	}); onShow

	const moneyClass = (money : string) => {
		return money.includes('-') ? 'green' : 'red'
	}

	const title = ref('')




	const eyeType = ref('eye')

	const eyeChange = () =>
		eyeType.value = eyeType.value === 'eye' ? 'eye-slash' : 'eye'


	const eyeChangeValue = (e : string) => eyeType.value === 'eye' ? e : "***"


	// 编辑
	const goTo = (type : string) => {
		uni.reLaunch({ url: `/pages/assetsManagement/addAssets/createAssetsAccount/createAssetsAccount?type=${type}` })
	}


	const startDate = getDate('day', 'start')
	const endDate = getDate('day', 'end')
	const monthDate = ref(getDate('month'))
	const bindMonthDateChange = (e : any) => {
		monthDate.value = e.detail.value as string
		getDetail()
	}
</script>

<style lang="scss" scoped>
	.assetsManagementDetail {
		padding: 5px 20px 0;

		// 收支统计
		.income-and-expenditure-statistics {
			margin: 0 auto 10px;
			padding: 15px;
			background-color: #c5ccd1;
			border-radius: 8px;

			.header {
				align-items: center;

				.text {
					margin-left: 10px;
				}
			}

			.eye {
				display: flex;
				justify-content: space-between;
			}

			.income-and-expenditure-statistics-header {
				margin-bottom: 20px;

				.income-and-expenditure-statistics-header-title {
					font-size: 22px;
				}
			}

			.income-and-expenditure-statistics-all-out {
				margin-bottom: 20px;
				font-size: 30px;
			}




		}

		.title-and-add {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0 15px;


		}


		.uni-list-view-container {
			height: 800px
		}

		// 明细列表
		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #c6c6c6;

			.list-item-content {
				display: flex;
				align-items: center;

				.list-item-content-view {
					margin-left: 10px;
				}
			}
		}

	}
</style>